<template>
  <div>
    <a-popover position="right" v-if="url">
      <template #content>
        <img :src="url" :style="{ maxWidth: `${largeWidth}px` }" />
      </template>
      <a-image :src="url" :width="width" :height="height" :fit="fit" :style="{ borderRadius }" />
    </a-popover>
    <span v-else>--</span>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'ImgHoverPreview' })

interface Props {
  url?: string
  width?: number
  height?: number
  largeWidth?: number
  round?: number | string
  fit?: 'fill' | 'contain' | 'none' | 'cover' | 'scale-down' | undefined
}

const prop = withDefaults(defineProps<Props>(), {
  url: '',
  width: 36,
  height: 36,
  largeWidth: 300,
  round: '',
  fit: 'contain'
})

const borderRadius = ref<number | string>(0)

watch(
  () => prop.round,
  (value) => {
    if (!value) borderRadius.value = 0
    else {
      if (typeof value === 'string') borderRadius.value = value
      else {
        borderRadius.value = `${value}px`
      }
    }
  },

  { deep: true, immediate: true }
)
</script>
